<template>
  <div>
    <h1>授权登录</h1>
    <div v-if="loading">正在等待授权，请稍候...</div>
  </div>
</template>

<script>
import { authorize } from '@/api/login'
export default {
  data() {
    return {
      // 替换上线后authback的实际地址
      redirectUri: 'http://10.40.217.197:80/authback', // 替换为实际的回调地址
      clientId: 'b9c67439a741bc4e1fb8', // 客户端ID，通常从配置中获取
      responseType: 'code', // 响应类型，通常是 'code' 或 'token'
      loading: true // 用于控制等待提示的显示
    }
  },
  methods: {
    async getToken() {
      try {
        const queryString = new URLSearchParams(location.search)
        const code = queryString.get('code')
        if (code) {
          const res = await authorize(code)
          const token = res.data?.token
          if (token) {
            this.$store.commit('SET_TOKEN', token)
            this.$router.push({ path: '/' })
          } else {
            this.$message.error('登录失败，未获取到有效的 token')
          }
        } else {
          console.error('未从 URL 中获取到 code 参数')
          this.$message.error('登录失败，缺少必要的 code 参数')
        }
      } catch (error) {
        console.error('登录请求失败:', error)
        this.$message.error('登录失败，请稍后再试')
      } finally {
        this.loading = false // 无论成功失败，都结束等待状态
      }
    }
  },
  mounted() {
    this.getToken()
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>